<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>轮播图列表</title>
    <link rel="stylesheet" th:href="@{/src/css/layui.css}">
</head>
<body>

<input type="hidden" id="adminId" value=""/>
<blockquote class="layui-elem-quote list_search">
        <div class="layui-inline">
            <a class="layui-btn layui-btn-normal carouselAdd_btn" ><i class="layui-icon">&#xe608;</i>   添加轮播</a>
        </div>

        <div class="layui-inline">
            <a class="layui-btn layui-btn-danger batchDel"><i class="layui-icon">&#xe640;</i>批量删除</a>
        </div>
    <div class="layui-inline">
        <a class="layui-btn layui-btn-normal preview" ><i class="layui-icon">&#xe608;</i> 预览</a>
    </div>
    <div class="layui-inline">
        <div class="layui-form-mid layui-word-aux"></div>
    </div>
</blockquote>
<!-- 数据表格 -->
<table id="carouselList" lay-filter="test"></table>
<script type="text/html" id="barEdit">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="statusTpl">
    <input type="checkbox" name="id" value="{{d.id}}" title="展示" lay-filter="lockStatus" {{ d.status == 1 ?'checked' : '' }}>
</script>
<script type="text/html" id="tableImg">
    <img src="{{d.imgurl }}" style="height:48px;width:48px;"/>


</script>
<script th:src="@{/src/layui.js}"></script>
<script>
    layui.use(['table','layer','jquery','form'],function () {
        var table = layui.table,
            layer = layui.layer,
            form = layui.form,
            $ = layui.jquery;

        table.render({
            id:'mytable',
            elem:'#carouselList',
            url:'/carousel/list',
            page:true,
            limit:10,
            limits:[10,20,30],
            cellMinWidth:80,
            cols:[
                [
                    {type:'checkbox'},
                    {title:'ID',field:'id'},
                    {title:'轮播图',field:'imgurl',templet:'#tableImg'},
                    {title:'地址',field:'imglink'},
                    {title:'备注',field:'remark'},
                    {title:'排序',field:'sorting'},
                    {title:'是否展示',field:'status',templet:'#statusTpl'},
                    {title:'创建时间',field:'createTime'},
                    {title:'更新时间',field:'updateTime'},
                    {title:'操作',templet:'#barEdit'}
                ]
            ],
            parseData:function (res) {
                return {
                    count:res.data.total,
                    code:res.code == 200?0:res.code,
                    data:res.data.list,
                    msg:res.message
                }
            }
        });
        $(".preview").click(function () {
            location.href="/carousel/preview"
        });
        //监听锁定事件
        form.on('checkbox(lockStatus)',function (data) {
           // alert(data.elem.value);
            var carouselId = data.elem.value;
            var status = data.elem.checked?1:0;
            $.ajax({
                url:'/carousel/updateStatus',
                data:{cid:carouselId,status:status},
                type:'put',
                dataType:'json',
                success:function (res) {
                    if(res.code == 200){
                        layer.msg('更新成功',{icon:1,time:1000},function () {
                            table.reload('mytable',{});
                        })
                    }else{
                        layui.msg('更新失败',{icon:5})
                    }
                }
            })
        })

        //添加轮播图
        $(".carouselAdd_btn").click(function () {
            layer.open({
                title:'添加轮播图',
                type:2,
                area:['500px','500px'],
                content:'/carousel/addCarousel'
            });
        })

        //批量删除
        $('.batchDel').click(function () {
            var checkStatus = table.checkStatus('mytable');
            var data = checkStatus.data;
            if (data.length == 0){
                layer.msg("请选择数据！",{icon:5});
                return;
            }
            var ids = '';
            $.each(data,function (index,obj) {
                if (index == data.length-1) {
                    ids += obj.id;
                }else {
                    ids += obj.id +",";
                }
            })
            layer.confirm("确定删除所选数据吗？",function () {
                $.ajax({
                    url:'/carousel/batchDel',
                    type:'delete',
                    data:{'ids':ids},
                    dataType:'json',
                    success:function (result) {
                        if (result.code == 200){
                            layer.msg(result.message,{icon:1},function () {
                                location.reload();
                            })
                        } else {
                            layer.msg(result.message,{icon:5})
                        }

                    }
                })
            })
        })

        //编辑
        table.on('tool(test)',function (row) {
            if(row.event === 'edit'){
                    layer.open({
                    type:2,
                    title:'编辑轮播图',
                    area:['500px','500px'],
                    content:'/carousel/editCarousel/'+row.data.id
                })
            }else if(row.event === 'del'){
                layer.confirm("真的要删除吗？",function (index) {
                    $.ajax({
                        url:'/carousel/del',
                        type:'delete',
                        data:{'id':row.data.id},
                        dataType:'json',
                        success:function (result) {
                            if (result.code == 200){
                                layer.msg(result.message,{icon:1},function () {
                                    location.reload();
                                });
                            } else {
                                layer.msg(result.message,{icon:5});
                            }
                        }
                    });
                    layer.close(index);
                })
            }
        })

    })

</script>


</body>
</html>